<template>
  <div class="applyAdmin">
    <van-nav-bar title="申请管理员" fixed></van-nav-bar>
    <div class="main">
      <van-field
        v-model="wxUserInfo.nickname"
        type="text"
        disabled
        label="微信昵称"
      />
      <van-field
        v-model.number="name"
        type="text"
        clearable
        label="真实姓名"
        placeholder="请输入姓名"
      />
      <van-field
        v-model.number="phone"
        type="number"
        clearable
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="code"
        type="number"
        center
        clearable
        label="验证码"
        placeholder="请输入手机验证码"
        use-button-slot
      >
        <div
          v-if="showTime === null"
          class="codebtn"
          @click="send"
          slot="button"
        >
          获取验证码
        </div>
        <div v-else class="codebtn" slot="button">
          {{ showTime }}
        </div>
      </van-field>
    </div>
    <div class="contents-btn" @click="save">提交</div>
    <!-- 弹框 -->
    <van-dialog v-model="show" :show-confirm-button="false">
      <template #title>
        <van-icon name="cross" @click="show = false" />
      </template>
      <template #default>
        <div class="cont">
          <p>您还未成为会员，是否去注册成为会员？</p>
          <van-divider />
          <div class="foot">
            <div class="left" @click="show = false">取消</div>
            <div class="right" @click="goLogin">确定</div>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>
<script>
import extract from "../../plugins/extract.js";
export default {
  data() {
    return {
      name: "",
      phone: "",
      code: "",
      showTime: null,
      wxUserInfo: {},
      show: false, //弹框
      isvip: false,
    };
  },
  watch: {
    ["cardNumber"](val) {
      this.$nextTick(() => {
        this.cardNumber = val.replace(/\s/g, "").replace(/....(?!$)/g, "$& ");
      });
    },
  },
  created() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
  },
  async mounted() {
    if (!JSON.parse(sessionStorage.getItem("userWxData"))) {
      await extract.wxShare();
    }
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));
    await this.whetherMyClient();
    if (!this.isvip) {
      this.show = true;
      return;
    }
  },
  methods: {
    //去注册成为会员
    async goLogin() {
      await this.getIndexPersonalInfo();
      // 获取个人信息
      await this.$store.dispatch("updateUserInfo");
      this.$router.push("/mineLogin");
    },
    //获取客户ID
    async getIndexPersonalInfo() {
      let obj = {
        account: this.$route.query.account,
        weChatNo: "",
        name: this.wxUserInfo.nickname,
        image: this.wxUserInfo.headimgurl,
        openId: this.wxUserInfo.openid,
        gender: this.wxUserInfo.sex,
        city: this.wxUserInfo.city,
        province: this.wxUserInfo.province,
      };
      let res = await this.$api.getIndexPersonalInfo(obj);
      if (res.code != 0) return this.$toast(res.msg);
      sessionStorage.setItem("agentIds", res.data.id);
    },
    formatter(value) {
      // 过滤输入的非数字
      return value.replace(/[^\d]/g, "");
    },
    //验证是否是管理员客户
    async whetherMyClient() {
      let res = await this.$api.whetherMyClient({
        openId: this.wxUserInfo.openid,
        accountId: this.$route.query.account,
      });
      this.isvip = res.data;
    },
    // 保存
    save() {
      if (!this.isvip) {
        this.show = true;
        return;
      }
      if (this.phone == "") {
        this.$toast("请输入手机号");
        return;
      } else if (this.code == "") {
        this.$toast("请输入验证码");
        return;
      } else if (this.name == "") {
        this.$toast("请输入姓名");
        return;
      }

      let obj = {
        phone: this.phone,
        account: this.$route.query.account,
        code: this.code,
        name: this.name,
        openId: this.wxUserInfo.openid,
      };

      this.$api.roleApply(obj).then((res) => {
        if (res.code == 0) {
          this.$toast("申请成功");
          setTimeout((_) => {
            //ios关闭页面
            WeixinJSBridge.call("closeWindow");
            //安卓关闭页面
            document.addEventListener(
              "WeixinJSBridgeReady",
              function() {
                WeixinJSBridge.call("closeWindow");
              },
              false
            );
          }, 1000);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    // 倒计时显示处理
    countDownText(s) {
      this.showTime = `${s}s后重新获取`;
    },
    // 倒计时 60秒 不需要很精准
    countDown(times) {
      const self = this;
      // 时间间隔 1秒
      const interval = 1000;
      let count = 0;
      self.timeCounter = setTimeout(countDownStart, interval);
      function countDownStart() {
        if (self.timeCounter == null) {
          return false;
        }
        count++;
        self.countDownText(times - count + 1);
        if (count > times) {
          clearTimeout(self.timeCounter);
          self.showTime = null;
        } else {
          self.timeCounter = setTimeout(countDownStart, interval);
        }
      }
    },
    send() {
      if (this.phone == "") {
        this.$toast("请输入手机号");
        return;
      } else {
        this.countDown(60);
        this.$api.getCode({ phone: this.phone }).then((res) => {
          if (res.code == 0) {
            this.$toast("验证码发送成功，请查收！");
          } else {
            this.$toast("请重新发送");
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  padding-top: 46px;
}
.codebtn {
  width: 100px;
  height: 30px;
  opacity: 1;
  border: 1px solid #0264d1;
  border-radius: 25px;
  text-align: center;
  line-height: 30px;
  color: #0264d1;
  font-size: 10px;
}
.contents-btn {
  position: fixed;
  left: 37.5px;
  bottom: 100px;
  width: 80%;
  height: 40px;
  opacity: 1;
  background: #477fe6;
  border-radius: 41px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
}
/deep/ .van-field--disabled .van-field__label {
  color: #646566;
}
/deep/ .van-field__control:disabled {
  color: #646566;
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: #646566;
}
/deep/ .van-dialog__header {
  text-align: right;
  padding: 15px 15px 0 0;
}
.van-dialog {
  width: 272px;
  .cont {
    font-size: 14px;
    font-weight: 700;
    color: #353535;
    text-align: center;
    p {
      padding: 20px 0;
    }
    .van-divider {
      margin: 0;
    }
    .foot {
      width: 100%;
      height: 43px;
      display: flex;
      .left,
      .right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #999999;
      }
      .right {
        color: #009dff;
        border-left: 1px solid #f5f6f8;
      }
    }
  }
}
</style>
